<template>
  <div
    class="article_box"
    :data-id="render_data_ref.id"
    :style="{ transition: '.2s' }"
    @click="fnc"
  >
    <router-link
      :to="{ name: 'ArticleId', params: { id: render_data_ref.id } }"
    >
      <div class="title">{{ render_data_ref.title }}</div>
      <div class="info">
        <Icon icon="user"></Icon>
        <span> 作者 </span>
        <span>{{ render_data_ref.author }} </span>
        <Icon icon="time"></Icon>
        <span> 发表于 </span>
        <span> {{ render_data_ref.up_time }} </span>
        <Icon icon="daohang"></Icon>
        <span> 分类 </span>
        <span v-for="(item, i) in render_data_ref.classification" :key="i">
          &nbsp;{{ item }}</span
        >
        <Icon icon="look"></Icon>
        <span> 阅读量 </span>
        <span> {{ render_data_ref.reading }} </span>
        <Icon icon="liuY"></Icon>
        <span> 留言 </span>
        <span> {{ render_data_ref.message }} </span>
      </div>
      <div class="Introduction">{{ render_data_ref.synopsis }}</div>
    </router-link>
  </div>
</template>
<script>
import { ref, onMounted } from "vue";
import Icon from "../../components/IconFont";
import { Axios } from "../../axios";

export default {
  components: {
    Icon,
  },
  props: {
    obj: {
      type: Object,
    },
  },
  setup(prop, ctx) {
    let render_data_ref = ref(prop.obj);
    let fnc = async () => {
      await Axios({
        url: "/data/lookup",
        method: "post",
        data: {
          id: render_data_ref.value.id,
        },
      });
    };
    return {
      render_data_ref,
      fnc,
    };
  },
};
</script>
<style lang='less'>
@import url("../../assets/global/var.less");
.icon {
  font-size: 14px;
  padding-left: 5px;
  vertical-align: middle;

  &:nth-of-type(2) {
    font-size: 12px;
  }

  &:nth-of-type(4) {
    font-size: 16px;
  }

  &:nth-of-type(5) {
    font-size: 16px;
  }
}
.article_box {
  a {
    text-decoration: none;
  }
  transition: all 0.5s;
  width: 740px;
  padding: 20px;
  cursor: pointer;
  margin-bottom: 20px;
  .global_border_shadow();

  &:hover {
    border: 1px solid rgb(213, 245, 33);
    box-shadow: 0 1px 2px 0px rgb(213, 245, 33);
  }

  span {
    vertical-align: middle;
  }

  .title {
    font-size: 26px;
    font-weight: 600;
    color: @title_color;
  }
  .info {
    font-size: 12px;
    color: @info_color;
    padding-top: 15px;
    padding-bottom: 20px;
  }
  .Introduction {
    font-size: 16px;
    color: @content_color;
    line-height: 2.5em;
    .more_line_ellipsis();
  }
}
</style>